comunidadfandomcom-20200215-history
Ayuda:Infoboxes
thumb|250px|right|Infobox de ejemplo Los infoboxes son parecidas a hojas informativas, o como las columnas laterales de los artículos de las revistas; y están hechas para mostrar un resumen del tema de una página. Estos infoboxes presentan los puntos importantes en un formato organizado y rápido de leer. Los infoboxes se hacen generalmente usando plantillas, para crear así consistencia en toda una comunidad. Fandom ha desarrollado una nueva forma de codificar infoboxes, llamada infoboxes portátiles para lograr que se visualicen bien en cualquier dispositivo que te detallaremos a continuación. No cambia la manera en cómo se usa un infobox en los artículos, si no la forma en cómo se crea la plantilla de el infobox. Se ha creado una herramienta de ayuda para la migración de infoboxes. Puedes encontrar más información sobre ella en la página: Ayuda:Traslado de Infoboxes. ;Enlaces útiles : *Para una introducción básica sobre el editor visual de infoboxes, ver Ayuda:Infoboxes/editando. *Para una lista detallada de todas las opciones estándares disponibles para las infoboxes portátiles, incluyendo ejemplos de wikitexto para usar y su salida en HTML, lee Ayuda:Infoboxes/Etiquetas. *Para más información sobre cómo usar el CSS para diseñar una infobox, incluyendo guías detalladas, lee Ayuda:Infoboxes/CSS. *Para ver instrucciones sobre cómo migrar una infobox 'clásica' a una infobox portátil, lee Ayuda:Traslado de Infoboxes. *Para una guía sobre como usar la funcionalidad de Infobox Preview, lee Ayuda:Infobox preview. *'Hub de portabilidad': Guías, ejemplos, y tutoría personalizada sobre cómo trasladar, personalizar y colocar un tema a tus infoboxes. __TOC__ Cómo añadir un infobox a un artículo thumb|150px|Insertando infoboxes portátiles en el Editor Visual Se puede añadir un infobox a un artículo del mismo modo en lo que harías con cualquier otra plantilla; ya sea a través de las herramientas integradas de plantilla del editor, o a través de su modo fuente. En el Editor Visual, los infoboxes pueden insertarse rápidamente mediante la opción "Infobox" del desplegable "Insertar". Entre tanto, en el modo código, generalmente comenzarías copiando la sintaxis de los datos de la plantilla (que normalmente se encuentra sobre la parte inferior de la página de la plantilla) y pegándola en un artículo, cambiando las palabras tras los signos de igual para mostrar la información deseada. Por ejemplo: Esto funciona exactamente igual que cualquier otra plantilla para los infoboxes, sin embargo, la etiqueta de la página de plantillas es un poco diferente, como se verá a continuación. Cómo crear un nuevo infobox Para empezar, crea una nueva plantilla con el nombre que quieras. “Plantilla:EjemploInfobox”, por ejemplo. Mientras que, en el pasado, hubiéramos empleado tablas y divs, ahora podremos usar etiquetas de infobox. Comenzaremos con una infobox básica, con un título y una imagen: Este wikitexto le indicará a tu plantilla que utilice los variables nombre e imagen para los elementos de title e image. Además, puedes añadir una etiqueta default, cuyo valor se utilizará cuando un usuario no especifique un nombre, imagen etc. en el artículo. Ahora sólo necesitamos dos campos que contengan información adicional, así que vamos a añadir uno: Temporadas(s) Después de añadir un último campo con fuente establecida primera y la etiqueta de Primera aparición, nos encontramos con lo siguiente: Temporada(s) Primera aparición Ahora podemos usar la plantilla en un artículo y obtener una infobox que funciona: Valores escondidos Cualquier campo o elemento sin un valor será automáticamente escondido. Esto se aplica a todas las etiquetas con la excepción de grupos que son forzados a ser mostrados (ver Forzar todos los elementos de grupo a ser mostrados. Cuando todos los elementos se encuentran vacíos, la infobox no aparecerá. Cómo cambiar el estilo de visualización de un infobox Las infoboxes que utilizan este tipo de código se decoran de forma automática, utilizando el tema de su comunidad. Si alguna de las variables está vacía, no se mostrará su fila correspondiente de la plantilla (a menos que se haya usado la etiqueta de "default"). Opciones de diseño Hay disponibles dos opciones alternativas de diseño para infoboxes: 'Tematización personalizada' El tema por defecto del infobox se puede sobrescribir de dos formas. Existe una variable dentro de la página Especial:FuncionalidadesDeFandom llamada Tema Europa de Infobox. Cuando esta variable se activa en la comunidad, los infoboxes van a extraer los colores existentes en la navegación de la comunidad y tenerlos como los suyos. La otra opción es utilizando CSS local comunitario, y los atributos del theme o theme-source de la etiqueta infobox, permitiendo decorar los infoboxes a través del CSS de la comunidad local. * El atributo''' theme''' se utiliza para especificar una clase de CSS personalizado para el infobox. * El atributo theme-source te permite variar la clase de CSS a través de un parámetro de plantilla. Para más información sobre como tematizar una infobox, incluyendo una guías detalladas, revisa Ayuda:Infoboxes/CSS o encuentra ejemplos de estilos y temas en el Hub de Portabilidad. Colores de acento Los colores de los fondos de título y encabezado además texto se pueden volver a pintar por infobox utilizando la función de color de acento. Al igual que '' 'theme-source' , el color utilizado es el valor del parámetro de la plantilla indicado en '' 'accent-color-source' '' (para fondos) y '' 'accent-color-text-source' '' (para texto). Como ejemplo: si la plantilla de infobox declara '''accent-color-source="bkg"' y la infobox del artículo declara bkg = #FFF, el color de fondo de los encabezados y títulos será #FFF o #FFFFFF en formato HEX, o el recoloramiento fallará silenciosamente. Los colores de acento sobreescribirán colores declarados usando temas así como por defecto. Esto también incluye un parámetro para el color predeterminado, por lo que el uso de accent-color-default = "# FFF" establece el color para todos los títulos y fondos de los encabezados y accent-color-text-default = # 000000 "'funciona de manera similar estableciendo el color de texto predeterminado usando formatos hexadecimales. Cómo usar múltiples imágenes y vídeos en un infobox thumb|220px|Imágenes en tablas Para utilizar múltiples imágenes en un solo infobox, simplemente debes colocar una etiqueta . Para más discusión sobre esta funcionalidad, por favor revisa Hilo:105996. Para añadir un vídeo en un infobox usa la etiqueta ; igual con lo que harías con una imagen. Cuando un vídeo es colocado en lugar de una imagen, un thumbnail con el icono de Play e información sobre la duración del vídeo se mostrará en el infobox, y al hacer clic en el vídeo abrirá una ventana con el reproductor de vídeo. Si deseas agregar varios vídeos usa una nueva etiqueta por cada vídeo. Cómo agrupar información en un infobox Ahora que has creado un infobox sencillo puedes aprender a utilizar campos más avanzados. En esta sección vamos a construir un infobox que se muestra a la derecha. thumb|600px|center|Grupos y ordenes inusuales en acción Esta infobox comienza con tres campos, luego campos individuales y . Como puedes ver, el campo no tiene que ser el primer campo. Previo Concurrente Siguiente 'Agrupando la información dentro de las etiquetas de grupo El siguiente campo te permitirá poner una serie de campos en grupo, cada uno de los cuáles puede tener un encabezado. Recuerda: los campos que estén abiertos pero qué no tengan un valor asignado no aparecerán. Esta regla también se aplica a los grupos: Si alguno de los campos dentro de un grupo particular carece de valor, con exclusión de la etiqueta de cabecera, no se visualizará el grupo entero. Previo Concurrente/label> Siguiente Detalles Conflicto Fecha Lugar Desenlace Diseño horizontal para grupos Los grupos de etiquetas pueden tener una disposición horizontal alternativa donde se visualice todo el contenido de seguido en una sola línea horizontal. Esto se puede lograr añadiendo el atributo layout="horizontal" a la etiqueta del grupo. ... Diseño inteligente para grupos El diseño "inteligente" es similar al diseño horizontal (filas estructuradas). Este permite a los campos de datos fluir en un solo grupo de una fila a la siguiente. Cuando un número de campos alcanza el límite definido, el siguiente campo de dato aparecerá en la siguiente fila. Los objetos en una fila se ajustarán para cubrir todo el ancho disponible. Para usar grupos inteligentes, añade row-items="3" (o algún número que establezca el límite). Todos los objetos en un grupo inteligente usan diseño horizontal por defecto, así que no es necesario añadir la atribución si estás usando grupos inteligentes. Sin embargo, es posible el juntar campos de datos horizontales y verticales en un grupo inteligente al añadir el atributo layout="default" a una etiqueta individual . Para que un campo de datos determinado ocupe más de un espacio, usa el atributo span="2" en una etiqueta . Details Conflict Date Place Outcome Forzar la visualización de todos los elementos del grupo Usando show="incomplete" '''puedes obligar a '''todos los elementos del grupo a visualizarse, incluso aunque estén vacíos. A menos que todos estén vacíos; pues entonces el grupo no se visualizará en absoluto. Combatientes Añadiendo todo esto junto, llegamos al código definitivo para la plantilla: Previous Concurrent Next Details Conflict Date Place Outcome Combatants Commanders Strength Casualties Civilian casualties Ahora podemos usarla en un artículo, y la misión está cumplida: 'Grupos plegables' thumb|Grupos plegables en acción. Los grupos se pueden hacer plegables añadiendo collapse="open" o collapse="closed" a la etiqueta del grupo. Esto hará que la cabecera de la fila del grupo sea clicable (para poder mostrar u ocultar el grupo), y el grupo aparecerá expandido o cerrado según corresponda. Appearances Nota: la fila de cabecera que tenga contenido debe seguir inmediatamente a continuación de la etiqueta del grupo para que esto funcione. Uso avanzado Dándole formato al campo Si quieres añadir alguna información extra a los datos (como añadir iconos, categorías, etc.) o ver valores anteriores, el formato del campo te puede permitir hacerlo. *Cuando la etiqueta format se especifica para el nodo, la variable proporcionada en source= se modifica tal y como se especifica en la etiqueta format. Para este propósito, el parámetro tiene que ser proporcionado en tres tirantes; por ejemplo } for source="price". *Si la variable proporcionada en source= está vacía, el nodo carga los valores proporcionados en las etiquetas defaults (o no las carga si las etiquetas default no se especifican). Los contenidos de default nunca están disponibles en funciones parser; ejemplo el parámetro } se mantendrá vacío. Puede ser tomado como el significado de 'formato por defecto', no 'valor por defecto' Algunos ejemplos como estos pueden usarse: * Texto adicional - $ }> * Enlaces - } * Categorías - Category: } En este caso, agregamos una plantilla : Price } El efecto que se muestra a la derecha se puede conseguir con la siguiente sintaxis: Price to buy Price with Haggling } Undiscounted price } Price to sell } Weight } 'Funciones parser' Se pueden añadir Funciones parser a cualquier infobox. Sin embargo, los resultados se ocultará automáticamente si el parámetro, etiqueta o fuente de datos no contiene ningún texto. No tendría sentido para probar la cadena vacía en la instrucción switch; ejemplo, |=(unknown rank), porque ya está cubierto por la etiqueta default. Ejemplos *Kratos (source) *Beatrix Kiddo (source) *Battle of Arrakeen (source) *Connie Beauchamp (source) Sección de ayuda y comentarios * Para información sobre el método clásico para escribir infoboxes, ver Ayuda:Infoboxes clásicas . * Para ayuda sobre infoboxes, visitar la comunidad de portabilidad. be:Даведка:Інфабоксы de:Hilfe:Infoboxen en:Help:Infoboxes fi:Ohje:Tietolaatikot fr:Aide:Infoboxes it:Aiuto:Infobox ja:ヘルプ:インフォボックス nl:Help:Infoboxen pl:Pomoc:Infoboksy pt:Ajuda:Infoboxes ru:Справка:Инфобоксы uk:Довідка:Інфобокси vi:Trợ giúp:Hộp thông tin zh:Help:訊息框 Categoría:Ayuda Categoría:Editando